<!-- 悬浮操作按钮 -->
<template>
	<view class="block-operating-button">
		<view class="main-botton" @click="clickMainButton">
			<text class="iconfont icon-add-bold"></text>
		</view>
		<view
			class="botton-for"
			v-if="buttonStatus">
			<view
				@click="clickButton(item.url)"
				class="for"
				v-for="item in Item">
				<text :class="item.iconfont"></text>
				<text class="text">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"block-operating-button",
		props:{
			Item: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				buttonStatus:false
			};
		},
		mounted(){
			
		},
		methods:{
			clickMainButton(){
				this.buttonStatus = !this.buttonStatus;
			},
			clickButton(url){
				this.$_To(url)
				this.buttonStatus = false;
			}
		},
	}
</script>

<style lang="scss" scoped>
.block-operating-button{
	.main-botton{
		position: fixed;
		right: 25rpx;
		bottom:var(--window-bottom);
		background: $LanSe;
		z-index: 999999;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		box-shadow: 0 0 15rpx #CCC;
		line-height: 55rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 25rpx;
		text{
			font-size: 55rpx;
			color: #FFF;
		}
	}
	@keyframes for{
		0%{
			opacity:0;
			margin-bottom: 100rpx;
		}
		100%{
			opacity:1;
			margin-bottom: 150rpx;
		}
	}
	.botton-for{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom);
		z-index: 999;
		animation-name:for;
		animation-duration: .8s;
		animation-fill-mode: both;
		.for{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			margin: 0 12.5rpx;
			background: #FFF;
			box-shadow: 0 0 15rpx #CCC;
			width: 95rpx;
			height: 95rpx;
			border-radius: 100%;
			.iconfont{
				font-size: 45rpx;
				line-height: 45rpx;
			}
			.text{
				font-size: 18rpx;
				line-height: 18rpx;
				color: $ZhanWeiSe;
				padding-top: 5rpx;
			}
		}
	}
}
</style>